<template>
  <view class="flex-col">

    <view class="page-wrap top-wrap">
      <view class="flex-col flex1">
        <view class="flex-row left20 bottom10 top10">
          <text class="flex1">{{ form.customerName|filterNull }}</text>
          <dict-tag
            :options="dict.type.business_scope"
            show-tag
            :value="form.businessScopeCode"/>
        </view>
        <view class="text-line">
          <text class="text-name">跟进人:</text>
          <text class="text-value">{{ form.followerNames|filterNull }}</text>
        </view>
        <view class="text-line">
          <text class="text-name">跟进时间:</text>
          <text class="text-value">{{ form.lastFollowTime|filterNull }}</text>
        </view>
      </view>

    </view>

    <view class="page-wrap">
      <template v-if="recordList && recordList.length">
        <m-steps v-for="(item, index) in recordList" :item="item" :key="index" :index="index" date="updateTime">
          <text slot="status">跟进时间: {{ item.followTime | filterNull }}</text>
          <view class="flex-col top10 record-content" slot="content">
            <view class="text-line">
              <text class="text-name">跟进人:</text>
              <text class="text-value">{{ item.followerName|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">跟进方式:</text>
              <text class="text-value">{{ item.followSource|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">跟进状态:</text>
              <text class="text-value">{{ item.followStatus|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">意向情况:</text>
              <view class="text-value">
                <dict-tag
                  :options="dict.type.clues_intention"
                  :value="item.followIntentionCode"/>
              </view>
            </view>
            <view class="text-line">
              <text class="text-name">跟进内容:</text>
              <text class="text-value">{{ item.followMemo|filterNull }}</text>
            </view>
          </view>
        </m-steps>
      </template>

      <no-data v-else />
    </view>

  </view>
</template>

<script>
import {cluesDetail, cluesFollowRecord} from "@/api/memberManage/clueList";
import mSteps from '@/components/m-steps.vue'

export default {
  components: {mSteps},
  dicts: ["business_scope", "clues_source", "clues_status", "clues_intention"],
  data() {
    return {
      form: {},
      cluesId: null,
      recordList: []
    }
  },
  onLoad(op) {
    this.cluesId = op?.cluesId ?? null;

    if (this.cluesId) {
      this.getOldData();
    }
  },
  methods: {
    getOldData() {
      cluesDetail(this.cluesId).then(res => {
        this.form = res?.data?.clues ?? {};
        this.getRecord();
      })
    },
    getRecord() {
      cluesFollowRecord(this.cluesId).then(res => {
        this.recordList = res.data
        if (res.data && res.data.length) {
          this.form = {
            businessScopeCode: this.form.businessScopeCode,
            customerName: this.form.customerName,
            ...res.data[0],
            followerNames: this.form.followerNames,
            lastFollowTime: this.form.lastFollowTime,
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.top-wrap {
  flex-direction: row;
  align-items: center;
  padding: 20rpx 20rpx 20rpx 0;
}

.history {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666;
}

.record-content {
  background: #FAFAFA;
  border-radius: 20rpx;
  padding: 10rpx;
}
</style>
